<template>
  <div>
    <!-- 专区more模块 -->
    <div class="moreContainer" v-for="(item,index) in items" :key="index">
      <div class="header">
        <div class="context">
          <p class="title">{{item.text}}</p>
          <p class="engt">ABOUT LOVE</p>
        </div>
        <div class="button" @click="cygrid(item)">MORE</div>
      </div>
      <img src="../../assets/cyimages/images/Sswipe1_02.png" alt />
      <div class="goods-list">
        <keep-alive>
          <GoodItem :goodslist="goodslist"></GoodItem>
        </keep-alive>
      </div>
    </div>
    <!-- 商品展示页 -->
  </div>
</template>

<script>
import { getHomeClassifyList } from "@/api/homeClassifyList.js";
import GoodItem from "components/goods/GoodItem.vue";
import { getGoodsList } from "@/api/goods.js";

export default {
  data() {
    return {
      items: [],
      homeClassifyList: [],
      goodslist: []
    };
  },
  methods: {
    cygrid(item) {
      var item = JSON.stringify(item);
      this.$router.push({
        name: "Classify",
        params: {
          item
        }
      });
      // console.log(item)
    },
    // 渲染分类列表
    async getDate() {
      let rs = await getHomeClassifyList();
      this.homeClassifyList = rs.data.body.result.filterList;
      console.log(this.homeClassifyList);
      for (var i = 0; i < this.homeClassifyList.length; i++) {
        var result = this.homeClassifyList[i].list.map(child => {
          return {
            text: child.name,
            id: child.id,
            checked: child.checked
          };
        });
        this.items.push({
          text: this.homeClassifyList[i].itemName,
          itemType: this.homeClassifyList[i].itemType,
          itemId: this.homeClassifyList[i].itemId,
          photo: this.homeClassifyList[i].photo,
          children: result
        });
      }
    },
    // 商品
    async getGoods(params) {
      let rs = await getGoodsList(params);
      this.goodslist = rs.data;
      console.log(this.goodslist)
    }
  },
  created() {
    this.getDate();
    this.getGoods();
  },
  computed: {},
  components: {
    GoodItem
  }
};
</script>

<style>
.moreContainer {
  overflow: hidden;
}
.moreContainer .header {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.context {
  position: absolute;
  left: 20px;
}
.title {
  font-size: 20px;
  font-size: 500;
}
.engt {
  font-size: 10px;
  transform: scale(0.8);
  letter-spacing: 2px;
  margin-left: -10px;
}
.button {
  line-height: 8px;
  text-align: center;
  background-color: #000000;
  border: 1px solid #747474;
  font-size: 8px;
  color: #fff;
  padding: 4px 9px;
  position: absolute;
  right: 20px;
}
img {
  width: 100%;
}
</style>